<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>听力管理系统 - 登录</title>
    <!-- Element UI CSS -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css"> -->
    <link rel="stylesheet" href="lib/element-ui.css">
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="login-app">
        <div class="login-container">
            <div class="login-box">
                <div class="login-header">
                    <h2>听力管理系统</h2>
                    <p>欢迎登录</p>
                </div>
                
                <el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="login-form">
                    <el-form-item prop="username">
                        <el-input 
                            v-model="loginForm.username" 
                            placeholder="用户名"
                            prefix-icon="el-icon-user"
                            size="large">
                        </el-input>
                    </el-form-item>
                    
                    <el-form-item prop="password">
                        <el-input 
                            v-model="loginForm.password" 
                            type="password" 
                            placeholder="密码"
                            prefix-icon="el-icon-lock"
                            size="large"
                            @keyup.enter="handleLogin">
                        </el-input>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button 
                            type="primary" 
                            class="login-btn" 
                            size="large" 
                            :loading="loading"
                            @click="handleLogin">
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

    <!-- Vue.js -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
    <!-- Element UI JS -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/index.js"></script> -->
    <!-- Axios -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script> -->

    <script src="lib/vue.js"></script>
    <script src="lib/element-ui.js"></script>
    <script src="lib/axios.js"></script>
    
    <!-- 自定义JS - 注意顺序：先auth.js，再api.js -->
    <script src="js/auth.js"></script>
    <script src="js/api.js"></script>
    
    <script>
        // 如果已登录，跳转到管理页面
        Auth.redirectIfLoggedIn();
        
        new Vue({
            el: '#login-app',
            data() {
                return {
                    loginForm: {
                        username: '',
                        password: ''
                    },
                    loading: false,
                    loginRules: {
                        username: [
                            { required: true, message: '请输入用户名', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' }
                        ]
                    }
                };
            },
            methods: {
                async handleLogin() {
                    this.$refs.loginForm.validate(async (valid) => {
                        if (valid) {
                            this.loading = true;
                            try {
                                const result = await sysApi.login(
                                    this.loginForm.username, 
                                    this.loginForm.password
                                );
                                
                                if (result && result.code === 200) {
                                    Auth.setUser(result.data);
                                    this.$message.success('登录成功');
                                    setTimeout(() => {
                                        window.location.href = 'admin.html';
                                    }, 1000);
                                } else {
                                    // 处理非200状态码
                                    this.$message.error(result.message || '登录失败');
                                }
                            } catch (error) {
                                // 这里会捕获到api.js中throw的错误
                                this.$message.error(error.message);
                            } finally {
                                this.loading = false;
                            }
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>